<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="BarEcharts">
// import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  },
  name: {
    type: String,
    required: false,
    default: ""
  }
});

const option: any = reactive({
  title: {
    text: "",
    textStyle: {
      fontSize: 14,
      textBorderColor: "#fff",
      textBorderWidth: 2
    },
    left: "center",
    top: "center"
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    top: "4%",
    containLabel: true
  },
  legend: {
    top: "0%",
    right: "0%",
    icon: "rect",
    itemWidth: 16, // 设置图例图标的宽度
    itemHeight: 16, // 设置图例图标的高度
    itemGap: 30, // 设置图例项之间的间距
    textStyle: {
      textBorderColor: "#fff",
      textBorderWidth: 2
    }
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "60%"],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 0
      },
      label: {
        show: true,
        // position: "center",
        fontSize: 14,
        // padding: [10, 0, 0, 0],
        // rich: {
        //   a: {
        //     fontSize: 16,
        //     padding: [10, 0, 0, 0]
        //   }
        // },
        // formatter: () => {
        //   return "无数据";
        // }
        formatter: "{d} %"
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: 40,
      //     fontWeight: "bold"
      //   }
      // },
      labelLine: {
        show: true,
        //第一段
        length: 15,
        //第二段
        length2: 25
      },
      data: []
    }
  ]
});

const setOption = () => {
  const data = props.data || [];
  const name = props.name || "";
  option.series[0].data = data;
  option.series[0].name = name;
  option.title.text = name;
  // option.series[0].label.formatter = () => {
  //   // const total = data.reduce((a, b: any) => a + b.value, 0);
  //   // return data.length ? total + "\n" + `{a|${name}总数}` : "无数据";
  //   return name;
  // };
  if (props.colorList && props.colorList.length) {
    option.color = props.colorList;
  }
};

watch(
  () => props.data,
  () => {
    console.log(props.data);
    setOption();
  }
);

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
